Build a React Image Slider Carousel from Scratch Tutorial

92,540 views92K views

Dec 1, 2020

75.1K subscribers

Learn how to build a React image slider carousel from scratch in this beginner tutorial. You will be able to navigate through the image slideshow using left and right arrows. We will use react hooks to create this project. Timeline: 0:00 What we are building 0:41 Creating React App 2:27 Creating Project Files 3:16 Creating Slider Data 6:13 Displaying Images 13:22 Adding CSS Access Source Code https://www.codavilla.com/posts/build... If you want to follow me along my coding journey, be sure to subscribe :) https://www.youtube.com/channel/UCsKs... Additional Videos Creating 3 different react navbars https://youtu.be/VzWBLj_CfpE Build React Website Using Smooth Scroll https://youtu.be/Nl54MJDR2p8 Build a React Gatsby Travel Website https://youtu.be/smHhNzM5Uo4

Show more

Mark Castle

Thank you so much for this tutorial, exactly what I was after and as a novice React user, very straightforward and easy to follow.

Ola Dabrowska

Hi Brian, great tutorial! Quick question: can we instead of passing down the slides via props, do the const length = SliderData.length in the Slider component? Since we import SliderData in Slider component the array is available. will that be correct? (video: 12min20sec)

DynerusHD

Awesome tutorial, was searching for something easy like this thanks! One question, If we are importing {SliderData} in our App.js and passing it down to <ImageSlider> as a prop, We can just use the passed down prop, slides to map through our Images instead of importing {SliderData} again in our <ImageSlider> right?

Ye Min Htun

11 months ago (edited)

Thanks for the tutorial sir. I have a question. If the purpose of passing SliderData as slides from app.js is just to get the length, then can't we just count directly in imageSlider.js? because in this file also, you called SliderData and mapped.

doktor

I love your videos, I learn so much from you ! Thank you again for making these tutorials. I have one question, how do I add AutoPlay on the slideshow, and pause it on hover of mouse? I would really appreciate your answer. Thank you in advance :)

Rachel Gildea

So helpful and easy to follow. Thanks!

View reply from Brian Design

Chrissy A

Thank you so much for this! I was able to recreate this for my site in about an hour cause of this video!! I used a class component instead of react hooks!

Nerd Nek

I thoroughly enjoy all your React content. your channel has helped me grow my skills and I thank you for all the free value.

View reply from Brian Design

jokeyDavid

Dude anything I search for by myself you're the first one to pop up to show me how to do it! Great contect big BIG thanks, everything looks amazing

Nitin Soni

I really appreciate your efforts for providing such good content on React. Any plans on some website or other cool project with backend like NodeJS or with firebase

Paulina Alejandra Sarquis

hi! great video by the way! I was wondering how could I change this line to create a styled component for it: <div className={index === current ? 'slide active' : 'slide'} key={index}> {index === current && (<Img src={slide.image} alt='travelimage'/> )} </div> the div and classname are throwing me off I got the Img to work on my styled component but I can not seem to get the ease and opacity things to work at the end thank you!

Read more

ValStarwind

Thank you so much for this video! This would have taken me a long time to work out from scratch

Lex

Thank you very much for a simple and clear slide.

Crystal Badu

Made it so easy to understand, thank you so much!!

View reply from Brian Design

Jenifer Jayme

Super helpful - thanks Brian! I've got this working and now looking to add a function to advance the slides automatically on a time interval. Let me know if you have any tips.

Cloud M

I really like your videos, excellent work, thank you very much for sharing your skills

View 4 replies from Brian Design and others

Kerry Weston

Brian - your tutorials are great. I'm hoping you make your tutorials available on Udemy for purchase. Your same tutorials could be on Youtube & Udemy. (-:

View 3 replies from Brian Design and others

FABIO X

Awesome tutorial, thank you!

Michael Arias Fajardo

Amazing the use of React State Hook's, Thank you Brian!

Nerd Web Tutorial

Really u are the best giving nice lecture in react js .... i am requesting you to continue this series.. Thanking You i Really inspired on you

View reply from Brian Design

What we are building

Creating React App

Creating Project Files

Creating Slider Data

Displaying Images

Adding CSS

Sync to video time

Learn how to build a React image slider carousel from scratch in this beginner tutorial. You will be able to navigate through the image slideshow using left and right arrows. We will use react hooks to create this project. Timeline: 0:00 What we are building 0:41 Creating React App 2:27 Creating Project Files 3:16 Creating Slider Data 6:13 Displaying Images 13:22 Adding CSS Access Source Code https://www.codavilla.com/posts/build... If you want to follow me along my coding journey, be sure to subscribe :) https://www.youtube.com/channel/UCsKs... Additional Videos Creating 3 different react navbars https://youtu.be/VzWBLj_CfpE Build React Website Using Smooth Scroll https://youtu.be/Nl54MJDR2p8 Build a React Gatsby Travel Website https://youtu.be/smHhNzM5Uo4

What we are building

Creating React App

Creating Project Files

Creating Slider Data